<template>
    <div class="tb">
        <table flex="1">
            <thead>
                <th v-for="item in list" :key="item"><input-title :title="item" :required="true"></input-title>
                </th>
            </thead>
            <tbody>
                <template v-if="form.length > 0">
                    <tr v-for="item, index in form" :key="item">
                        <td :data-ind="ind(index + 1)">
                            <input :data-font="$i18n.locale" class="tb-ipt" v-model="item.name" maxlength="7"
                                :placeholder="$t('application.form.enter')" :disabled="disabled" />
                        </td>
                        <td>
                            <select-input @message="(e) => { item.role = e }" :typeList="roleList"
                                :placeholder="$t('application.form.choose')" width="2.4rem" :disabled="disabled"
                                :history="item.role"></select-input>
                        </td>
                        <td>
                            <input :data-font="$i18n.locale" class="tb-ipt" v-model="item.college" maxlength="15"
                                :placeholder="$t('application.form.enter')" :disabled="disabled" />
                        </td>
                        <td>
                            <input :data-font="$i18n.locale" class="tb-ipt" v-model="item.specialty" maxlength="10"
                                :placeholder="$t('application.form.enter')" :disabled="disabled" />
                        </td>
                        <td>
                            <input :data-font="$i18n.locale" class="tb-ipt" v-model="item.grade"
                                :placeholder="$t('application.form.enter')" :disabled="disabled" />
                        </td>
                        <td>
                            <input :data-font="$i18n.locale" class="tb-ipt" v-model="item.phone"
                                :placeholder="$t('application.form.enter')" :disabled="disabled" />
                            <div class="del" @click.stop="del(index)" v-if="!disabled"></div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
        <p class="empty" v-if="form.length <= 0">No data!</p>
        <div class="increase-btn">
            <el-button @click="increase" :data-font="$i18n.locale" :disabled="disabled">
            {{ $t('application.form.addMembers') }}
            </el-button>
        </div>
    </div>
</template>

<script>
import inputTitle from './input-title.vue';
import selectInput from './select-input.vue';
import Confirm from '@/components/message/confirm.js'
import { reactive } from 'vue'
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        history: {
            type: Array,
            default: [{
                name: "",
                role: "",
                college: "",
                specialty: "",
                grade: "",
                phone: ""
            },
            {
                name: "",
                role: "",
                college: "",
                specialty: "",
                grade: "",
                phone: ""
            }, {
                name: "",
                role: "",
                college: "",
                specialty: "",
                grade: "",
                phone: ""
            }
            ]
        }
    },
    components: {
        inputTitle,
        selectInput
    },
    setup() {
        const form = reactive([{
            name: "",
            role: "",
            college: "",
            specialty: "",
            grade: "",
            phone: ""
        },
        {
            name: "",
            role: "",
            college: "",
            specialty: "",
            grade: "",
            phone: ""
        }, {
            name: "",
            role: "",
            college: "",
            specialty: "",
            grade: "",
            phone: ""
        }
        ])

        return {
            form
        }
    },
    computed: {
        list() {
            let num = []
            if (this.$i18n.locale == 'zh') {
                num = ["成员姓名", "成员角色", "学院", "专业", "年级", "联系电话"];
            } else if (this.$i18n.locale == 'en') {
                num = ["Member Name", "Role", "College", "Major", "Grade", "Tel"];
            }
            return num;
        },
        ind() {
            return (index) => {
                let num = '';
                if (index) {
                    num = index.toString().padStart(2, '0')
                }
                return num
            }
        },
        roleList() {
            let num = [];
            if (this.$i18n.locale === 'zh') {
                num = [
                    {
                        name: '队长',
                        value: '1'
                    },
                    {
                        name: '队员',
                        value: '2'
                    },
                    {
                        name: '指导老师',
                        value: '3'
                    }
                ]
            } else if (this.$i18n.locale === 'en') {
                num = [
                    {
                        name: 'Leader',
                        value: '1'
                    },
                    {
                        name: 'Member',
                        value: '2'
                    },
                    {
                        name: 'Advisor',
                        value: '3'
                    }
                ]
            }

            return num;
        }
    },
    methods: {
        del(index) {
            if (this.$i18n.locale === 'zh') {
                Confirm({ title: '删除项目', message: '确定要删除该条队员信息吗？', left: '取消', right: '删除' })
                    .then(() => {
                        this.form.splice(index, 1)
                    })
                    .then((ret) => {

                    })
                    .catch((err) => {
                        // 点击取消按钮触发
                        if (err === 'cancel') return
                    })
            } else {
                Confirm({ title: 'Delete Item', message: 'Are you sure you want to delete this member?', left: 'Cancel', right: 'Delete' })
                    .then(() => {
                        this.form.splice(index, 1)
                    })
                    .then((ret) => {

                    })
                    .catch((err) => {
                        // 点击取消按钮触发
                        if (err === 'cancel') return
                    })
            }
        },
        increase() {
            let num = {
                name: "",
                role: "",
                college: "",
                specialty: "",
                grade: "",
                phone: ""
            }
            this.form.push(num)
        }
    },

    watch: {
        form: {
            deep: true, // 开启深度监听
            handler(newVal, oldVal) {
                this.$emit("message", newVal)
            }
        },
        history: {
            deep: true,
            handler(newVal, oldVal) {
                if (newVal.length > 0) {
                    this.form = newVal;
                }
                this.$emit("message", newVal)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.tb {
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    border: none;

    th {
        text-align: left;
    }

    th:nth-of-type(1) {
        width: 7.2rem;
    }

    th:nth-of-type(2) {
        width: 3.92rem;
    }

    th:nth-of-type(3) {
        width: 7.85rem;
    }

    th:nth-of-type(4) {
        width: 5.65rem;
    }

    th:nth-of-type(5) {
        width: 2.77rem;
    }

    tr {
        td {
            position: relative;
            border: none;
            border-bottom: 0.03rem #C5C5CA solid;
            height: 1.25rem;
        }

        td:nth-of-type(1)::before {
            content: attr(data-ind);
            position: absolute;
            left: -0.47rem;
            bottom: 0.2rem;
            font-size: 0.32rem;
            font-family: 'SmileySans-Oblique', 'SmileySans';
            font-weight: normal;
            color: #C5C5CA;
            line-height: 0.48rem;
        }

        td:nth-last-child(1) {
            position: relative;
        }

        .del {
            position: absolute;
            right: -0.64rem;
            top: 50%;
            transform: translateY(-50%);
            width: 0.64rem;
            height: 0.64rem;
            background: url('@/assets/img/application/delete.png') no-repeat;
            background-size: 50% 50%;
            background-position: 50% 50%;
            pointer-events: auto;
            cursor: url('@/assets/手.png'), auto;
        }

    }


}

input {
    border: none;
    outline: none;
    background: none;
    pointer-events: auto;
    padding-right: 0.27rem;
}


.tb-ipt {
    width: 100%;
}

.tb-ipt[data-font='zh'] {
    height: 0.85rem;
    font-size: 0.53rem;
    font-weight: normal;
    color: #68656C;
    line-height: 0.85rem;
    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
}

.tb-ipt[data-font='en'] {
    height: 0.75rem;
    font-size: 0.48rem;
    font-family: 'Helvetica';
    color: #68656C;
    line-height: 0.75rem;
}

.empty {
    text-align: center;
    color: #999;
    padding: 10px 0;
    font-size: 28px;
}



.tb-ipt[data-font='zh']::placeholder {
    height: 0.85rem;
    font-size: 0.53rem;
    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #C5C5CA;
    line-height: 0.85rem;
}

.tb-ipt[data-font='en']::placeholder {
    height: 0.75rem;
    font-size: 0.48rem;
    font-family: Helvetica;
    color: #C5C5CA;
    line-height: 0.75rem;
}

.increase-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.64rem;

    .el-button {
        width: 9.68rem;
        height: 1.08rem;
        background: linear-gradient(315deg, rgb(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
        border-radius: 0.11rem;
        border: 0.03rem solid #7709CC;
        backdrop-filter: blur(10px);
    }

    .el-button[disabled] {
        cursor: not-allowed !important;
    }

    .el-button :deep(span) {
        font-size: 0.48rem;
        color: #7709CC;
    }

    .el-button[data-font='zh'] :deep(span) {
        font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
    }

    .el-button[data-font='en'] :deep(span) {
        font-family: 'PingFangSC-Light', 'PingFang SC';
        font-weight: 300;
    }
}
</style>